<!-- 这是发布页面 -->
<template>
	<view class="post">
		<view class="post-header">
			<!-- <index-header></index-header> -->
			<public-header></public-header>
			
			<view class="post-header__btn flex">
				<button class="post-header__btn-clear" @click="clearForm">清除信息</button>
				<button class="post-header__btn-submit" @click="submitForm">提交</button>
			</view>
		</view>
		
		<view class="post-main">
			<!-- tab栏部分 -->
			<view class="post-tab flex">
				<view class="post-tab__item"
				v-for="(item,index) in postTabItems"
				:key="item.id"
				:class="{'post-tab__item--active':activeTabIndex===index}"
				@tap="changeTab(index)"
				>
					{{item.title}}
				</view>
			</view>
			
			<!-- 关键词选择部分 -->
			<post-tag-select 
				v-show="activeTabIndex!==4"
				v-model:tags="formData.tags"
				v-model:title="formData.title"
				v-model:remark="formData.description"
				ref="tagSelectRef"
			></post-tag-select>
			
			<!-- 寻物信息 -->
			<view class="post-find"
			v-show="activeTabIndex===0"
			>
				<post-information 
					:title="'丢失物品位置'"
					v-model:images="formData.images"
					ref="infoRef"
				>
					<template #position>
						<public-position v-model="formData.location"></public-position>
					</template>
				</post-information>
			</view>
			
			<!-- 失物信息 -->
			<view class="post-lost"
			v-show="activeTabIndex===1"
			>	
				<post-information 
					:title="'丢失物品位置'"
					v-model:images="formData.images"
					v-model="formData.location"
				>
					<template #tag>
						<view class="post-lost__place-tags flex">
							<view class="post-lost__place-tag"
							v-for="(item,index) in lostTags"
							:key="item.id"
							@tap="tapLostSelectTags(index)"
							:class="{'post-lost__place-tag--active':lostSelectTags.includes(index)}"
							>
								{{item.title}}
							</view>
						</view>
					</template>
					
					<template #position>
						<public-position v-model="formData.location"></public-position>
					</template>
					
					<template #tips>
						<view class="post-lost__place-tips flex">
							<image src="/static/images/tips.png" mode="aspectFill" class="post-lost__place-tips-icon"></image>
							<view class="post-lost__place-tips-text">目前校园内部代收点有：陶园、雍园、沁园、南门菜鸟以及西区田径场失物招领中心点。</view>
						</view>
					</template>
				</post-information>
			</view>
			
			<!-- 闲置物品 -->
			<view class="post-idle"
			v-show="activeTabIndex===2"
			>
				<post-information 
					:title="'物品展示图'"
					v-model:images="formData.images"
					v-model="formData.location"
				>
					<template #position>
						<public-position v-model="formData.location"></public-position>
					</template>
				</post-information>
				
				<!-- 位置展示 -->
				<view class="post-idle__place">
					<text class="post-idle__place-title">闲置物品交易处</text>
					
					<!-- tags -->
					<view class="post-lost__place-tags flex">
						<view class="post-lost__place-tag"
						v-for="(item,index) in lostTags"
						:key="item.id"
						@tap="tapIdleSelectTags(index)"
						:class="{'post-lost__place-tag--active':idleSelectTags.includes(index)}"
						>
							{{item.title}}
						</view>
					</view>
				</view>
			</view>
			
			<!-- 寻找闲置 -->
			<view class="post-find-idle"
			v-show="activeTabIndex===3"
			>
				<post-information 
					:title="'闲置物品状态图'"
					v-model:images="formData.images"
					v-model="formData.location"
				>
					<template #position>
						<public-position v-model="formData.location"></public-position>
					</template>
				</post-information>
			</view>
			
			<!-- 发布论坛 -->
			<view class="post-forum"
			v-show="activeTabIndex===4"
			>
				<!-- 论坛表单 -->
				<view class="post-forum__form">
					<input type="text" placeholder="添加标题" class="post-forum__form-title" v-model="formData.title"/>
					
					<textarea placeholder="添加正文" name="" id="" cols="30" rows="10" class="post-forum__form-content" v-model="formData.description"></textarea>
					
					<post-information 
						:title="'图片上传'"
						v-model:images="formData.images"
					></post-information>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import publicHeader from '@/components/publicHeader/publicHeader.vue';
	import postTagSelect from '@/components/postTagSelect/postTagSelect.vue';
	import postInformation from '@/components/postInformation/postInformation.vue'
	import publicPosition from '@/components/publicPosition/publicPosition.vue';
	import { addItem } from '@/utils/apis.js'
	
	const postTabItems = ref([
		{title:'寻物信息',id:'postTab01'},
		{title:'失物信息',id:'postTab02'},
		{title:'闲置物品',id:'postTab03'},
		{title:'寻找闲置',id:'postTab04'},
		{title:'论坛发布',id:'postTab05'},
	])
	
	// 失物信息的tag
	const lostTags = ref([
		{title:'本人代管',id:'lostTag01'},
		{title:'拾取处',id:'lostTag02'},
		{title:'代收处',id:'lostTag03'}
	])
	
	// 记录活跃的tab
	const activeTabIndex = ref(0);
	
	// lost被选中的tag
	const lostSelectTags = ref([])
	
	function tapLostSelectTags(index){
		if(lostSelectTags.value.includes(index)){
			lostSelectTags.value = lostSelectTags.value.filter(item=>item!==index);
		}else{
			lostSelectTags.value.push(index);
		}
	}
	
	// idle被选中的tag
	const idleSelectTags = ref([])
	
	function tapIdleSelectTags(index){
		if(idleSelectTags.value.includes(index)){
			idleSelectTags.value = idleSelectTags.value.filter(item=>item!==index);
		}else{
			idleSelectTags.value.push(index);
		}
	}

	// 切换tab的函数
	function changeTab(index){
		activeTabIndex.value = index;
	}

	// 表单数据
	const formData = ref({
		title: '', // 标题
		description: '', // 描述
		location: '', // 位置
		images: [], // 图片列表
		tags: [], // 标签
	})
	
	// 组件引用
	const tagSelectRef = ref(null)
	const infoRef = ref(null)
	
	// 清除表单数据
	function clearForm() {
		formData.value = {
			title: '',
			description: '',
			location: '',
			images: [],
			tags: [],
		}
		// 清除子组件数据
		if(tagSelectRef.value) {
			tagSelectRef.value.clearData()
		}
		// if(infoRef.value) {
		// 	infoRef.value.clearData()
		// }
		uni.showToast({
			title: '清除成功',
			icon: 'success'
		})
	}
	
	// 提交表单
	async function submitForm() {
		console.log('提交的表单数据:', formData.value);
		try {
			// 表单验证
			// if(!formData.value.title) {
			// 	uni.showToast({
			// 		title: '请输入标题',
			// 		icon: 'none'
			// 	})
			// 	return
			// }
			// if(!formData.value.tags || formData.value.tags.length === 0) {
			// 	uni.showToast({
			// 		title: '请选择类别',
			// 		icon: 'none'
			// 	})
			// 	return
			// }
			// if(!formData.value.location) {
			// 	uni.showToast({
			// 		title: '请选择位置',
			// 		icon: 'none'
			// 	})
			// 	return
			// }
			// if(!formData.value.images || formData.value.images.length === 0) {
			// 	uni.showToast({
			// 		title: '请上传图片',
			// 		icon: 'none'
			// 	})
			// 	return
			// }
			
			// 构造新物品数据
			// const newItem = {
			// 	id: 'lostItems' + (Date.now() % 1000).toString().padStart(2, '0'),
			// 	data: {
			// 		image: formData.value.images[0].url || '../../static/images/items/白色水杯.jpg', // 使用第一张图片或默认图片
			// 		name: formData.value.title,
			// 		status: '待寻找',
			// 		date: new Date().toISOString().split('T')[0].replace(/-/g, '-'),
			// 		type: formData.value.tags[0] || '生活用品'
			// 	}
			// }
			
			// console.log('新增的物品数据:', newItem);
			
			// 设置全局变量，标记有新提交
			const app = getApp();
			app.globalData = app.globalData || {};
			app.globalData.hasNewSubmission = true;
			// app.globalData.newLostItem = newItem;

			console.log('app.globalData:',app.globalData);
			
			uni.showToast({
				title: '发布成功',
				icon: 'success'
			})
			
			// 清除表单
			// clearForm()
			
			// 返回上一页
			setTimeout(() => {
				uni.switchTab({
					url: '/pages/index/index'
				})
			}, 1500)
			
		} catch(e) {
			console.error('发布失败', e)
			uni.showToast({
				title: '发布失败',
				icon: 'none'
			})
		}
	}
</script>

<style lang="scss" scoped>
// 修改样式
::v-deep .file-title{
	font-size: 24rpx;
}

::v-deep .file-count{
	font-size: 24rpx;
}

.post{
	width: 100%;
	height: 100%;
	background-color: #f2f2f2;
	&-header{
		width: 100%;
		background-color: #81d3f8;
		padding-bottom: 20rpx;
		&__btn{
			width: 100%;
			box-sizing: border-box;
			padding: 0 30rpx;
			justify-content: space-between;
			
			&-clear,&-submit{
				width: 128rpx;
				height: 48rpx;
				line-height: 48rpx;
				font-size: 24rpx;
				background-color: #fff;
				border-radius: 40rpx;
			}
		}
	}
	
	&-main{
		width: 100%;
		// height: 100%;
	}
	
	// tab部分
	&-tab{
		height: 74rpx;
		margin-bottom: 25rpx;
		&__item{
			width: 150rpx;
			height: 74rpx;
			line-height: 74rpx;
			background-color: #b4ddee;
			font-size: 25rpx;
			color: #fff;
			text-align: center;
			// flex-shrink: 0;
			border-left: 1rpx solid #fff;
			border-right: 1rpx solid #fff;
			
			&:nth-child(1){
				border-left: none;
			}
			
			&:nth-last-child(1){
				border-right: none;
			}
			&--active{
				background-color: #81d3f8;
				font-weight: 700;
			}
		}
	}
	
	// 发布找到部分
	&-find{
		// 位置描述部分
		&__place{
			width: 690rpx;
			margin: 0 auto;
			box-sizing: border-box;
			padding:0 40rpx;
			padding-top: 30rpx;
			padding-bottom: 40rpx;
			background-color: #fff;
			border-radius: 40rpx;
			font-size: 24rpx;
			color: #333333;
			
			&-title{
				display: block;
				margin-bottom: 30rpx;
			}
			
			&-choose{
				margin-bottom: 30rpx;
			}
			
			&-icon{
				width: 30rpx;
				height: 30rpx;
				margin: 0 18rpx;
			}
		}
		
		&__title {
			width: 690rpx;
			margin: 0 auto;
			background-color: #fff;
			border-radius: 40rpx;
			padding: 20rpx 30rpx;
			margin-bottom: 20rpx;
			
			&-input {
				width: 100%;
				height: 60rpx;
				font-size: 28rpx;
			}
		}
		
		&__description {
			width: 690rpx;
			margin: 0 auto;
			background-color: #fff;
			border-radius: 40rpx;
			padding: 20rpx 30rpx;
			margin-bottom: 20rpx;
			
			&-input {
				width: 100%;
				height: 200rpx;
				font-size: 28rpx;
			}
		}
		
		&__contact {
			width: 690rpx;
			margin: 0 auto;
			background-color: #fff;
			border-radius: 40rpx;
			padding: 20rpx 30rpx;
			margin-bottom: 20rpx;
			
			&-input {
				width: 100%;
				height: 60rpx;
				font-size: 28rpx;
			}
		}
		
		&__reward {
			width: 690rpx;
			margin: 0 auto;
			background-color: #fff;
			border-radius: 40rpx;
			padding: 20rpx 30rpx;
			margin-bottom: 20rpx;
			
			&-input {
				width: 100%;
				height: 60rpx;
				font-size: 28rpx;
			}
		}
		
		&__upload {
			width: 690rpx;
			margin: 0 auto;
			background-color: #fff;
			border-radius: 40rpx;
			padding: 20rpx 30rpx;
			margin-bottom: 20rpx;
		}
	}
	
	// 发布失物
	&-lost{
		// 位置描述部分
		&__place{
			width: 690rpx;
			margin: 0 auto;
			box-sizing: border-box;
			padding: 30rpx;
			background-color: #fff;
			font-size: 24rpx;
			border-radius: 40rpx;
			&-title{
				color: #333333;
				display: block;
				margin-bottom: 30rpx;
			}
			
			&-tags{
				margin-bottom: 30rpx;
			}
			
			&-tag{
				width: fit-content;
				height: 40rpx;
				line-height: 40rpx;
				border-radius: 30rpx;
				background-color: #f0f0f0;
				margin-right: 18rpx;
				padding: .3em .5em;
				&--active{
					background-color: skyblue;
				}
			}
			
			&-choose{
				margin-bottom: 24rpx;
			}
			
			&-icon{
				width: 30rpx;
				height: 30rpx;
				margin: 0 18rpx;
			}
			
			&-tips{
				margin-bottom: 20rpx;
				&-icon{
					width: 30rpx;
					height: 30rpx;
					margin-right: 18rpx;
				}
				
				&-text{
					font-size: 18rpx;
					width: 582rpx;
					color: #bcb6b6;
				}
			}
		}
	}
	
	// 发布闲置
	&-idle{
		&__img{
			width: 690rpx;
			margin: 0 auto;
			background-color: #fff;
			font-size: 24rpx;
			box-sizing: border-box;
			padding: 30rpx;
			border-radius: 40rpx;
			margin-bottom: 30rpx;
			&-title{
				color: #333333;
				margin-bottom: 30rpx;
			}
		}
		
		&__place{
			width: 690rpx;
			margin: 0 auto;
			background-color: #fff;
			font-size: 24rpx;
			box-sizing: border-box;
			padding: 30rpx;
			border-radius: 40rpx;
			
			&-title{
				display: block;
				color: #333333;
				margin-bottom: 30rpx;
			}
		}
	}
	
	// 论坛发布
	&-forum{
		&__form{
			// width: 690rpx;
			width: 690rpx;
			margin: 0 auto;
			background-color: #fff;
			font-size: 24rpx;
			color: #333;
			box-sizing: border-box;
			padding: 30rpx;
			border-radius: 40rpx;
			
			&-title{
				width: 630rpx;
				height: 54rpx;
				background-color: #f2f2f2;
				border-radius: 20rpx;
				box-sizing: border-box;
				padding-left: 30rpx;
				margin: 0 auto;
				margin-bottom: 40rpx;
			}
			
			&-content{
				width: 630rpx;
				margin: 0 auto;
				height: 98rpx;
				background-color: #f2f2f2;
				border-radius: 20rpx;
				box-sizing: border-box;
				padding-left: 30rpx;
				padding-top: 10rpx;
				margin-bottom: 30rpx;
			}
		}
	}
	
	

}
</style>
